<script setup lang="ts">
import { loginFn } from '@/api/login';
import { ref } from 'vue'
import type { Ref } from 'vue'

import { showToast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()


// 用来提交表单登录的方法
function onSubmit() {
  loginFn({
    username: username.value,
    password: password.value
  }).then(res => {
    console.log(res);
    showToast(res.data.message)
    if (res.data.code == '200') {

      // 登录成功
      // 1. 保存 token
      // 2. 保存用户 id
      // 3. 保存用户登录状态

      router.push('/shouye')
    }
  })
}

// 定义用户名和密码
const username: Ref<string> = ref('')
const password: Ref<string> = ref('')


</script>
<template>
  <div class="box">
    <header class="header">
      <span>登录</span>
      <van-icon name="arrow-left" size="20" @click="$router.back()" />
    </header>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />

        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="success" native-type="submit">
          登录
        </van-button>
      </div>
      <div style="margin: 16px;">
        <van-button @click="$router.push('/register')" round block type="primary">
          去注册
        </van-button>
      </div>
    </van-form>

  </div>
</template>
<style scoped lang="scss">
header {
  font-weight: 700;
  height: 0.44rem;
  text-align: center;
  background-color: rgb(72, 141, 245);
  font-size: 16px;
  color: white;
  line-height: 44px;

  .van-icon {
    position: fixed;
    left: 10px;
    line-height: 44px;
  }
}
</style>